function FirstView({ listData }) {
  
  return (
    <>
      <h3>多列布局</h3>
      <p>实现方式：多列布局采取的是css样式<span className="tag-red">columns: 3</span>将容器拆分为对应列数，并将元素平均地放入各列当中。同时各元素要设置<span className="tag-red">break-inside: avoid</span>避免各元素被分割</p>
      <p>方案特点：该方法能够最为简单地实现瀑布流效果，但是元素只能从上到下排列</p>
      <p>实际应用：在实际项目中，王往是将页面地元素优先展示，即从左到右的排列方式。若是需要实现触底加载功能时，除了新增元素外原来的很多元素位置也会发生改变。同时各元素宽度若不一致，会存在横向的留白。该方法比较适用于静态限定数量图片的展示</p>
      <div className="first-container">
        { listData.map(item => 
          <img key={item} src={item} />
        ) }
      </div>
    </>
  )
}

export default FirstView